<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/11/11
  Time: 10:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>

<div id="addGustForm">
    <form class="layui-form" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">角色名字</label>
            <div class="layui-input-block">
                <input type="text" name="jname" required   placeholder="请输入角色名字" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" >立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<div id="updGustForm">
    <form class="layui-form" action="" lay-filter="modify">
        <div class="layui-form-item">
            <label class="layui-form-label">角色id</label>
            <div class="layui-input-block">
                <input type="text"  name="id" required  lay-verify="required" autocomplete="off" class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名字</label>
            <div class="layui-input-block">
                <input type="text"  name="jname" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" >立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
   <%-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>--%>
    {{# if(d.id==1) { }}
    <a class="layui-btn layui-btn-xs layui-btn-normal layui-btn-disabled" >你在想什么</a>
    {{# }else{    }}
    <a class="layui-btn layui-btn-xs layui-btn-normal "  lay-event="fpqx">分配权限</a>
    {{# } }}
</script>
<table class="layui-hide" id="test" lay-filter="test"></table>

<div id="treemenu">
    <input type="hidden" id="rid">
    <div id="test12" class="demo-tree-more"></div>
    <%--提交按钮--%>
    <button class="layui-btn"  onclick="fq()">分配权限</button>
</div>
<script>

    var $="";
    var tree="";
    var layer="";
    layui.use(['table','layer','form','tree','util'], function(){
        var table = layui.table;
        layer=layui.layer;
        $=layui.jquery;
        var form=layui.form;
        tree=layui.tree;
        var util=layui.util;
        $("#addGustForm").hide();
        $("#updGustForm").hide();
        $("#treemenu").hide();

        //权限结构
        var data=[{
            id:1,
            title:'权限管理',
            spread:true,
            children:[{
                id:2,
                title:'角色信息'
            }
            ]
        },{
            id:3,
            title:'前厅部',
            spread:true,
            children:[{
                id:4,
                title:'前台管理'
            },{
                id:5,
                title:'客户信息'
            }]
        },{
            id:6,
            title:'人事部',
            spread:true,
            children:[{
                id:7,
                title:'员工信息查询'
            }
            ]
        },{
            id:8,
            title:'部门管理',
            spread:true,
            children:[{
                id:9,
                title:'部门查询'
            }
            ]
        },{
            id:10,
            title:'客房管理',
            spread:true,
            children:[{
                id:11,
                title:'客房信息'
            },{
                id:12,
                title:'房间类型管理'
            },{
                id:13,
                title:'房间入住记录查询'
            },{
                id:14,
                title:'房间换房记录查询'
            },{
                id:15,
                title:'房间续房记录查询'
            },{
                id:16,
                title:'设施表'
            },{
                id:17,
                title:'房间设施表'
            }
            ]
        },{
            id:18,
            title:'预定管理',
            spread:true,
            children:[{
                id:19,
                title:'预定信息'
            },{
                id:20,
                title:'预定121'
            }
            ]
        },{
            id:21,
            title:'财务部',
            spread:true,
            children:[{
                id:22,
                title:'收入统计'
            },{
                id:23,
                title:'支出统计'
            },{
                id:24,
                title:'财务表'
            }
            ]
        },{
            id:25,
            title:'货物管理',
            spread:true,
            children:[{
                id:26,
                title:'货物1'
            },{
                id:27,
                title:'货物2'
            }
            ]
        },{
            id:28,
            title:'会员管理',
            spread:true,
            children:[{
                id:29,
                title:'会员信息'
            },{
                id:30,
                title:'会员类型'
            },{
                id:31,
                title:'会员活动'
            }
            ]
        }
        ];

        tree.render({
            elem: '#test12'
            ,data:data
            ,showCheckbox: true  //是否显示复选框
            ,id: 'demoId1'
            //,isJump: true //是否允许点击节点时弹出新窗口跳转
            ,click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
            }
        });

        table.render({
            elem: '#test' //id为test的table
            ,url:'${pageContext.request.contextPath}/queryAllRole'   //url 查询数据   所有的客户的数据
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: []
            ,title: '角色表'
            //data[{ id:12,name:123}]
            ,cols: [[
                {field:'id', title:'ID',fixed: 'left',  sort: true}
                ,{field:'jname', title:'角色名字'}
                // ,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
                //         return '<em>'+ res.email +'</em>'
                //     }}

                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}

            ]]
            ,page: true
        });


        //监听行工具事件  test  表格的id
        table.on('tool(test)', function(obj){
            //obj 代表 一行的内容
            var data = obj.data; //一行的数据
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    // obj.del();//页面删除
                    window.location.href="${pageContext.request.contextPath}/queryAllRole?method=del&id="+data.id;
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                form.val("modify",{
                    "id":data.id,
                    "jname":data.jname,

                });
                layer.open({
                    title: '修改信息'
                    ,type:1
                    ,area: ['500px', '350px']
                    ,offset: '50px'
                    ,content:$("#updGustForm")
                });
                form.on('submit(formDemo)', function(data){
                    //layer.msg(JSON.stringify(data.field));
                    //1.将获取到到的数据保存到数据库
                    $.ajax({
                        url:"${pageContext.request.contextPath}/queryAllRole?method=add",
                        data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                        type:"post",

                        success:function(r){
                            layer.closeAll();
                            //刷新一下table
                            table.reload('test',{
                                page:{
                                    curr:1
                                }
                            })

                        },error:function(msg){
                            alert("服务器错误")
                        }

                    })

                    return false;
                });
            }else if(obj.event === 'fpqx'){

                $("#rid").val(data.id);
                layer.open({
                    type:1
                    ,area:['400px','450px']
                    ,offset:'50px'
                    ,content:$("#treemenu")
                });
                tree.reload('demoId1', {

                });
                var aa=[];
                $.ajax({
                    url:"${pageContext.request.contextPath}/queryAllRole?method=queryid"
                    ,data:{rid:data.id}
                    ,async:false
                    ,dataType:"JSON"
                    ,success:function (r) {
                        //alert(r)
                        for(var i=0;i<r.length;i++){
                            aa.push(r[i].id);
                        }
                    }

                })
                tree.setChecked('demoId1',aa); //勾选指定节点
            }
        });





        table.on('toolbar(test)',function (obj) {
            layer.open({
                title:'添加角色'
                ,type:1
                ,area:['500px','350']
                ,offset:'50px'
                ,content:$("#addGustForm")
            });
            form.on('submit(formDemo)', function(data){
                //layer.msg(JSON.stringify(data.field));
                //1.将获取到到的数据保存到数据库
                $.ajax({
                    url:"${pageContext.request.contextPath}/queryAllRole?method=add",
                    data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                    type:"post",

                    success:function(r){
                        layer.closeAll();
                        //刷新一下table
                        table.reload('test',{
                            page:{
                                curr:1
                            }
                        })

                    },error:function(msg){
                        alert("服务器错误")
                    }

                })
                return false;
            });

        });


    });

    //分配权限
    function fq(){
        var arr=[];
        var rid=$("#rid").val();
        var checkeedData=tree.getChecked('demoId1');
        for(var i=0;i<checkeedData.length;i++){
            var parentNode=checkeedData[i];
            //alert(JSON.stringify(parentNode));
            var id=parentNode.id
            arr.push(id);
            var childreNode=parentNode.children;
            for(var j=0;j<childreNode.length;j++){
                var cid=childreNode[j].id;
                arr.push(cid);
            }
        }
        //alert(arr)
        var menuid=arr.join(",");
        $.ajax({
            url:"${pageContext.request.contextPath}/queryAllRole?method=updQx"
            ,data:{rid:rid,mid:menuid}
            ,success:function (d) {
                if(d>0){
                    layer.msg("分配成功！！！！");
                }
            }
        })
        layer.closeAll();
    }
</script>
</body>
</html>
